<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="统计" name="first">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          ">
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">设备名称:</div>
            <el-select v-model="equipmentId" placeholder="请选择">
              <el-option v-for="item in deviceList" :key="item.id" :label="item.equipmentInfo.name"
                :value="item.equipmentId" />
            </el-select>
          </div>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">数据类型:</div>
            <el-select v-model="dataType" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="block" style="display: flex; align-items: center">
            <div style="display: flex; align-items: center">
              开始时间：
              <el-date-picker v-model="startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                placeholder="选择开始时间" />
            </div>
            <div class="littleMargin" style="display: flex; align-items: center; margin-left: 20px">
              结束时间：
              <el-date-picker v-model="endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                placeholder="选择结束时间" />
            </div>
          </div>
          <el-button @click="gethistoryData">查询</el-button>
        </div>
        <div ref="charts" v-loading="loading" style="
            width: 100%;
            height: 700px;
            margin-top: 20px;
            padding: 20px;
            background: #ffffff;
          ">
          <p-echarts :option="option" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史数据" name="second">
        <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters"
          @selection-change="handleSelectionChange">
          <template slot="outHandle">
            <el-col :span="3">
              <el-button v-permission="['superSysOpsAdmin']" type="danger" @click="batchRemove">删除</el-button>
            </el-col>
          </template>
        </wise-crud>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import pEcharts from '@/components/charts/pEcharts'
  import {
    postHandle
  } from '@/api'
  import dayjs from 'dayjs'
  export default {
    name: 'SafetyHistory',
    components: {
      WiseCrud,
      pEcharts
    },
    data() {
      return {
        loading: false,
        activeName: 'first',
        filtersItem: [],
        deviceList: [],
        equipmentId: '',
        startTime: dayjs().startOf('day').toDate(),
        endTime: dayjs().endOf('day').toDate(),
        options: [{
            value: 'LeakageA1',
            label: '漏电1'
          },
          {
            value: 'LeakageA2',
            label: '漏电2'
          },
          {
            value: 'LeakageA3',
            label: '漏电3'
          },
          {
            value: 'LeakageA4',
            label: '漏电4'
          },
          {
            value: 'LeakageA5',
            label: '漏电5'
          },
          {
            value: 'LeakageA6',
            label: '漏电6'
          },
          {
            label: '甲烷浓度',
            value: 'flammableGas'
          },
          {
            value: 'oxygen',
            label: '氧气浓度'
          },
          {
            value: 'waterContentA',
            label: '含水量A'
          },
          {
            value: 'waterContentB',
            label: '含水量B'
          },
          {
            value: 'inclinationA',
            label: '倾斜角度A'
          },
          {
            value: 'inclinationB',
            label: '倾斜角度B'
          }
        ],
        dataType: ['LeakageA1'],
        urls: {
          list: '/api/v1/welder-sbtx-second/hj-datas-comb/get-list-by-code',
          export: '/api/v1/welder-sbtx-second/hj-datas-comb/export-safety-excel'
        },
        handle: ['export', 'filters'],
        fields: [{
            label: '序号',
            type: 'selection',
            use: ['table']
          },
          {
            label: '项目编号',
            prop: 'refromUnit',
            type: 'text',
            use: ['table']
          },
          // {
          //   label: '网关编号',
          //   prop: 'geteWayCode',
          //   type: 'text',
          //   labelWidth: '200px',
          //   use: ['table', 'filters']
          // },
          // {
          //   label: '设备编号',
          //   prop: 'equipCode',
          //   type: 'text',
          //   labelWidth: '200px',
          //   use: ['table']
          // },
          {
            label: '设备名1称',
            prop: 'equipmentObj',
            type: 'select',
            url: '/api/v1/welder-sbtx-second/project-equipment-comb/list',
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.$store.state.project.spaceId
            }],
            labelKey: 'equipmentInfo.name',
            valueKey: 'equipmentId',
            objKeys: [{
              field: 'equipmentId',
              operator: 'EQUALS',
              key: 'equipmentId'
            }],
            use: ['filters']
          },

          {
            label: '设备名称',
            prop: 'equipmentName',
            type: 'text',
            labelWidth: '200px',
            use: ['table']
          },
          // {
          //   label: '工艺规程',
          //   prop: 'process',
          //   type: 'text',
          //   tableWidth: '100px',
          //   use: ['table']
          // },
          // {
          //   label: '焊口编号',
          //   prop: 'weldSerialNum',
          //   type: 'text',
          //   tableWidth: '100px',
          //   use: ['table']
          // },
          // {
          //   label: '探伤代码',
          //   prop: 'flawDetection',
          //   type: 'text',
          //   tableWidth: '100px',
          //   use: ['table']
          // },
          // {
          //   label: '人员编号',
          //   prop: 'personCode',
          //   type: 'text',
          //   tableWidth: '100px',
          //   use: ['table']
          // },
          // {
          //   label: '人员名称',
          //   prop: 'username',
          //   type: 'text',
          //   tableWidth: '100px',
          //   use: ['table']
          // },
          {
            label: '漏电1',
            prop: 'LeakageA1',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '漏电2',
            prop: 'LeakageA2',
            type: 'text',
            tableWidth: '120px',
            use: ['table']
          },
          {
            label: '漏电3',
            prop: 'LeakageA3',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '漏电4',
            prop: 'LeakageA4',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '漏电5',
            prop: 'LeakageA5',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '漏电6',
            prop: 'LeakageA6',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '甲烷浓度',
            prop: 'flammableGas',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '氧气浓度',
            prop: 'oxygen',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '一氧化碳浓度',
            prop: 'standby5',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '硫化氢浓度',
            prop: 'standby4',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          {
            label: '水分1',
            prop: 'arPurity',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          
          {
            label: '角度1',
            prop: 'airFlux',
            type: 'text',
            tableWidth: '100px',
            use: ['table']
          },
          
          {
            label: '参数采集时间',
            prop: 'cjTime',
            type: 'datetime',
            operator: 'between',
            tableWidth: '200px',
            labelWidth: '200px',
            use: ['table', 'filters'],
            format: 'YYYY-MM-DD HH:mm:ss'
          }
        ],
        multipleSelection: [],
        page: {
          p: 1,
          ps: 10
        },
        dataList: []
      }
    },
    computed: {
      spaceId() {
        return this.$store.state.project.spaceId
      },
      filters() {
        return [{
            field: 'spaceId',
            operator: 'EQUALS',
            value: this.$store.state.project.spaceId
          },
          {
            field: 'code',
            operator: 'EQUALS',
            value: 'safety'
          }
        ]
      },
      option() {
        let timeData = []
        let series = []
        this.dataType.forEach((item) => {
          let data = []
          this.dataList.forEach((element) => {
            data.push(element[item])
          })
          series.push({
            name: this.options.find((o) => o.value === item).label,
            type: 'line',
            smooth: true,
            data: data
          })
        })
        this.dataList.forEach((element) => {
          timeData.push(dayjs(element.cjTime).format('YYYY-MM-DD HH:mm:ss'))
        })
        return {
          grid: {
            left: 30,
            right: 15,
            bottom: 100,
            top: 80
          },
          color: [
            '#5CD5C8',
            '#A48AEA',
            '#EAD18A',
            '#E07C71',
            '#8ED55C',
            '#D12A89'
          ],
          legend: {
            x: 'center',
            y: 'top',
            show: true,
            top: '5%',
            right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: '#556677'
            },
            data: series.map((item) => item.name)
          },
          toolbox: {
            right: 80,
            feature: {
              // dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [{
              startValue: dayjs(this.startTime).format('YYYY-MM-DD HH:mm:ss')
            },
            {
              type: 'inside'
            }
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0
              }
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#5c6c7c'
            },
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: timeData
          },
          yAxis: {
            type: 'value',
            axisPointer: {
              snap: true
            }
          },
          series: series
        }
      }
    },
    created() {
      this.getDeviceList()
    },
    methods: {
      getDeviceList() {
        postHandle('/api/v1/welder-sbtx-second/project-equipment-comb/list', {
          d: {
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.spaceId
            }],
            page: {
              ps: 1000,
              p: 1
            },
            retPage: false
          }
        }).then((res) => {
          this.deviceList = res.result
          this.equipmentId = this.deviceList[0].equipmentId
          this.gethistoryData()
        })
      },
      gethistoryData() {
        this.loading = true
        postHandle('/api/v1/welder-sbtx-second/hj-datas-comb/list', {
          d: {
            filters: [{
                field: 'spaceId',
                operator: 'EQUALS',
                value: this.spaceId
              },
              {
                field: 'code',
                operator: 'EQUALS',
                value: 'safety'
              },
              {
                field: 'equipmentId',
                operator: 'EQUALS',
                value: this.equipmentId
              },
              {
                field: 'cjTime',
                operator: 'BETWEEN',
                value: dayjs(this.startTime).valueOf(),
                value_to: dayjs(this.endTime).valueOf()
              }
            ],
            page: {
              ps: 9999,
              p: 1
            },
            sorts: [{
              field: 'ct',
              isDesc: false
            }],
            retPage: false
          }
        }).then((res) => {
          this.loading = false
          this.dataList = res.result
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      batchRemove() {
        let params = this.$refs['wise-crud'].dataFilters
        let date = params.find((item) => item.field === 'cjTime')
        if (date) {
          this.$confirm(
              '此操作将永久删除该时间段下的所有数据, 是否继续?',
              '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
            .then(() => {
              postHandle('/api/v1/welder-sbtx-second/hj-datas-comb/remove-time', {
                  d: {},
                  obj: {
                    code: 'safety',
                    spaceId: this.spaceId, // 项目spaceid
                    startTime: dayjs(date.value).format('YYYY-MM-DD HH:mm:ss'), // 开始时间
                    endTime: dayjs(date.value_to).format('YYYY-MM-DD HH:mm:ss') // 结束时间
                  }
                })
                .then((res) => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.$refs['wise-crud'].handleSearch()
                })
                .catch(() => {
                  this.$message({
                    type: 'info',
                    message: '删除失败'
                  })
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else {
          if (!(this.multipleSelection && this.multipleSelection.length > 0)) {
            this.$message.error('请选择要删除的数据')
            return false
          }
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              postHandle('/api/v1/welder-sbtx-second/hj-datas-comb/remove-batch', {
                  d: {},
                  obj: {
                    dataIds: this.multipleSelection.map((item) => item.id)
                  }
                })
                .then((res) => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.$refs['wise-crud'].handleSearch()
                })
                .catch(() => {
                  this.$message({
                    type: 'info',
                    message: '删除失败'
                  })
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    }
  }
</script>

<style>
</style>